import './style/MatchManagement.less';
import { Space, Table, Input, Select } from 'antd';
import {React,useState} from 'react';
import {post} from '../../utils/ajax';
import {NavLink} from 'react-router-dom';

export default function MatchManagement(props){
    //antd的引入
    const {Search} = Input;
    const {Option} = Select;

    const [searchType,setSearchType] = useState('');
    
    const [data,setData] = useState([
        // {
        //     key: '1',
        //     JuBenName: '11sd1',
        //     DMName: '张三',
        //     address: 'New York No. 1 Lake Park',
        // },
        {
            key: '2',
            JuBenName: '22asd2',
            DMName: '李四',
            address: 'asdasd',
        },
        {
            key: '3',
            JuBenName: '111',
            DMName: '张三',
            address: 'sdwadasd',
        },
        {
            key: '4',
            JuBenName: '111',
            DMName: '张三',
            address: 'New York No. 1 Lake Park',
        },
        {
            key: '1',
            JuBenName: '111',
            DMName: '张三',
            address: 'New York No. 1 Lake Park',
        },
        {
            key: '5',
            JuBenName: '111',
            DMName: '张三',
            address: 'New York No. 1 Lake Park',
        },
        {
            key: '6',
            JuBenName: '111',
            DMName: '张三',
            address: 'New York No. 1 Lake Park',
        },
        {
            key: '7',
            JuBenName: '111',
            DMName: '张三',
            address: 'New York No. 1 Lake Park',
        },
        {
            key: '8',
            JuBenName: '111',
            DMName: '张三',
            address: 'New York No. 1 Lake Park',
        },
        {
            key: '9',
            JuBenName: '111',
            DMName: '张三',
            address: 'New York No. 1 Lake Park',
        },
        {
            key: '10',
            JuBenName: '111',
            DMName: '张三',
            address: 'New York No. 1 Lake Park',
        },
        {
            key: '11',
            JuBenName: '111',
            DMName: '张三',
            address: 'New York No. 1 Lake Park',
        },
        {
            key: '12',
            JuBenName: '111',
            DMName: '张三',
            address: 'New York No. 1 Lake Park',
        },
        {
            key: '13',
            JuBenName: '111',
            DMName: '张三',
            address: 'New York No. 1 Lake Park',
        },
        {
            key: '14',
            JuBenName: '111',
            DMName: '张三',
            address: 'New York No. 1 Lake Park',
        },
        {
            key: '15',
            JuBenName: '111',
            DMName: '张三',
            address: 'New York No. 1 Lake Park',
        },
    ]);
    const [total,setTotal] = useState(data.length);

    const columns = [
        {
          title: '剧本名',
          dataIndex: 'JuBenName',
          key: 'JuBenName',
          //render接收一个函数，函数的text参数代表title的值,record代表此条记录的data对象
          render: (text,record) => <NavLink to={`/management/dmInfromation/${record.id}`}>{text}</NavLink>,
        },
        {
          title: 'DM',
          dataIndex: 'DMName',
          key: 'DMName',
          render: (text,record) => <NavLink to={`/management/dmInfromation/${record.id}`}>{text}</NavLink>,
        },
        {
          title: '店家',
          dataIndex: 'address',
          key: 'address',
          render: (text,record) => <NavLink to={`/management/storeInfromation/${record.id}`}>{text}</NavLink>,
        },
        {
          title: '操作',
          key: 'action',
          render: (_, record) => (
            <Space size="middle">
              <a>修改</a>
              <a>删除</a>
            </Space>
          ),
        },
    ];

    const handleOptionChange =(value)=>{
        setSearchType(value);
    };
    const handleJuBenSearch = (value)=>{
        /*  此处进行ajax请求，将value值传给后端，返回得到新的newData
            setData(newData);
            setTotal(newData.length);
        */
        setData([{
                key: '1a',
                JuBenName: '111',
                DMName: '张三',
                address: 'New York No. 1 Lake Park',
            },
            {
                key: '2a',
                JuBenName: '222',
                DMName: '李四',
                address: 'New York No. 1 Lake Park',
        }]);
        console.log(value);
    }
    const handleDMSearch = (value)=>{
        /*  此处进行ajax请求，将value值传给后端，返回得到新的newData
            setData(newData);
        */
        post('/dminformation',{dmid:value})
            .then(res=>{console.log(res)})
            .catch(error=>{console.log(error)})
       console.log(value);
    }
    const handleStoreSearch = (value)=>{
        /*  此处进行ajax请求，将value值传给后端，返回得到新的newData
            setData(newData);
        */
       console.log(value);
    }
    
    return (
        <div>
            <div className="mapage-header">{props.title}</div>
            <div className='madata-container'>
                <div className='madata-search'>
                    <Select
                        showSearch={false}
                        placeholder="选中一个进行搜索"
                        style={{width: 200,}}
                        onChange={handleOptionChange}
                    >
                        <Option value="JuBenName">剧本名</Option>
                        <Option value="DMName">DM</Option>
                        <Option value="StoreName">店家</Option>
                    </Select>

                    {searchType && searchType === 'JuBenName' &&<Search 
                    placeholder="请输入想查找的剧本名"  
                    enterButton 
                    style={{width: 400,marginLeft:20}}
                    // onChange={fn}输入框内容发生变化时的回调
                    // onPressEnter={fn}按下回车时候的回调
                    // onSearch={fn(value,event)}点击搜索按钮时的回调
                    onSearch={handleJuBenSearch}
                    />}

                    {searchType && searchType === 'DMName' &&<Search 
                    placeholder="请输入想查找的DM"  
                    enterButton
                    style={{width: 400,marginLeft:20,}}
                    onSearch={handleDMSearch}
                    />}

                    {searchType && searchType === 'StoreName' &&<Search 
                    placeholder="请输入想查找的店名"  
                    enterButton
                    style={{width: 400,marginLeft:20,}}
                    onSearch={handleStoreSearch}
                    />}
                </div>
                <Table 
                columns={columns} 
                dataSource={data} 
                pagination={{
                    total:total,
                    showSizeChanger:true,
                    showQuickJumper:true,
                    showTotal:(total) => `Total ${total} items`,
                }}
                style={{marginTop:20}}
                />
            </div>
        </div>
    )
}